﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <meta name="viewport" content="width=device-width, initial-scale=0.5 minimum-scale=0.5, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <!-- <meta http-equiv="Access-Control-Allow-Origin" content="*"> -->
    <title>canvas图片合成及长按保存图片</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
	<div style="width:100%;position: relative;z-index:10;" id="my_img">
		<img src="image/theone.png" alt="" style="width:100%;">
		<div style="position: absolute;left:0;right:0;bottom: 1rem;">
			<div style="width: 5.83rem;height:1.13rem;margin-left:auto;margin-right:auto;">
				<img src="image/the_two.png" alt="" style="width:100%;height:100%;">
			</div>
		</div>
	</div>
	<canvas id="myCanvas" style="position: absolute;left:0;top:0;opacity: 0.01;"></canvas>
    <img src="" alt="" id="getImg_id" style="width:100%;position: absolute;left:0;top:0;opacity: 0.01;">
</div>
</body>
<script>
// rem的适配  1rem = 100px;
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 10);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, window);
</script>
<script>
var _myImg = document.getElementById("my_img");
var cavas_h = _myImg.offsetHeight;
var cavas_w = _myImg.offsetWidth;
var myCanvas = document.getElementById("myCanvas");
myCanvas.setAttribute("width",cavas_w + "px");
myCanvas.setAttribute("height",cavas_h + "px");

var cxt = myCanvas.getContext("2d");
var img = [],
    flag = 0,
    flag1 = 0,
    imgSrc = [
        "image/theone.png",
        "image/er.png"
    ]

for(var i = 0; i < imgSrc.length; i++){
    img[i] = new Image();
    img[i].src = imgSrc[i] + '?' + new Date().getTime();
    img[i].setAttribute('crossOrigin', 'Anonymous');

    if(img[i].complete){
        flag++;
        if(flag == imgSrc.length){
            cxt.drawImage(img[0],0,0,cavas_w,cavas_h);
            cxt.drawImage(img[1],cavas_w * 0.14,cavas_h - cavas_w * 0.45,cavas_w * 0.3,cavas_w * 0.3);
            document.getElementById("getImg_id").src = myCanvas.toDataURL("image/png");
            console.log(bas);
        }
    }
    else{
        img[i].onload = function(){
            flag1++;
            if(flag1 == imgSrc.length){
                cxt.drawImage(img[0],0,0,cavas_w,cavas_h);
                cxt.drawImage(img[1],cavas_w * 0.14,cavas_h - cavas_w * 0.45,cavas_w * 0.3,cavas_w * 0.3);
                document.getElementById("getImg_id").src = myCanvas.toDataURL("image/png");
                // console.log(bas);
            }
        }
    }
    
}
</script>
</html>